<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>增加电子文档</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<form class="layui-form" enctype="multipart/form-data" method="post" action="" id="fm">
    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">文档名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" lay-reqtext="请输入文档名称" placeholder="请输入文档名称"
                       value="" class="layui-input">
                <!--<tip>填写自己管理账号的名称。</tip>-->
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label required">上传人</label>
            <div class="layui-input-block">
                <input type="text" name="uploader" lay-verify="required" lay-reqtext="请输入上传人" placeholder="请输入上传人"
                       value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">所属分类</label>
            <div class="layui-input-inline">
                <select id="cid">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <!--<label class="layui-form-label">上传附件</label>
              <div class="layui-input-block">
                   <button type="button" class="layui-btn" id="uploadBtn">
                       <i class="layui-icon"></i>上传附件
                   </button>
               </div>-->

            <div class="layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="uploadBtn">选择附件</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr><th>文件名</th>
                            <th>大小</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr></thead>
                        <tbody id="fileList"></tbody>
                    </table>
                </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">上传时间</label>
            <div class="layui-input-block">
                <input type="text" name="createTime" id="createTime" placeholder="请输入附件上传时间" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">文档摘要</label>
            <div class="layui-input-block">
                <textarea placeholder="请输入文档摘要" name="summary" class="layui-textarea" style="resize: none"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn" id="saveBtn">保存提交</button>
            </div>
        </div>
    </div>
</form>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script>
    //日期自定义时分秒为当前时间
    let startTime = null;
    let now = new Date();

    function uploadTime(id) {
        layui.use('laydate', function () {
            let laydate = layui.laydate;
            startTime = laydate.render({
                elem: '#' + id,
                type: 'datetime',
                format: 'yyyy-MM-dd HH:mm:ss',
                zIndex: 99999999,
                trigger: 'click',
                ready: function (date) {
                    this.dateTime.hours = now.getHours();
                    this.dateTime.minutes = now.getMinutes();
                    this.dateTime.seconds = now.getSeconds();
                },
                done: function (value, date, endDate) {
                    startTime.config.max = {
                        year: date.year,
                        month: date.month - 1,
                        date: date.date,
                        hours: this.dateTime.hours,
                        minutes: this.dateTime.minutes,
                        seconds: this.dateTime.seconds
                    };

                }
            });
        });
    }


    //文档分类select动态赋值
    function loadCategory() {
        let $ = layui.jquery;
        $.ajax({
            type: 'get',
            cache:false,
            url: '/api/v1/category/list',
            dataType:'json',
            success: function (res) {
                let data = res.data;
                $('#cid').html('<option value="0">请选择分类</option>');
                $.each(data, function (key, item) {
                    let $option = $("<option>").val(item.id).text(item.cname);
                    $('#cid').append($option);
                });
                layui.form.render('select');
            }
        });
    }


    layui.use(['form', 'upload'], function () {
        let form = layui.form,
            layer = layui.layer,
            $ = layui.$,
            upload = layui.upload;

        //上传日期时间选择器
        uploadTime('createTime');


        //给分类下拉列表框动态赋值
        loadCategory();


        //多文件列表示例
        var demoListView = $('#fileList')
            ,uploadListIns = upload.render({
            elem: '#uploadBtn'
            ,url: '/api/v1/upload/file'
            ,accept: 'file'
            ,multiple: false
            ,auto: true
            //,size: 5120
            //,bindAction: '#testListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+ (file.size/1024).toFixed(1) +'KB</td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                        ,'</td>'
                        ,'</tr>'].join(''));
                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });
                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                    });
                    demoListView.append(tr);
                });
            }
            ,done: function(res, index, upload){
                if(res.code == 200){ //上传成功
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html(''); //清空操作
                    return delete this.files[index]; //删除文件队列已经上传成功的文件
                }
                this.error(index, upload);
            }
            ,error: function(index, upload){
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });

        //文件上传
      /*uploadFile('#uploadBtn',upload,function (res) {
           console.log(res);
       },function (err) {
           console.log(err);
       });*/

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            /*let index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);

                var iframeIndex = parent.layer.getFrameIndex(window.name);
                parent.layer.close(iframeIndex);

            });*/
            let formData = JSON.stringify(data.field);
            $.post("/api/v1/document/save", formData, function (res) {

            }, 'json');

            return false;
        });

    });


   function uploadFile(eleId, layUpload, done, error) {
        layUpload.render({
            elem: eleId
            , url: '/api/v1/upload/file'
            , accept: 'file'
            , exts: 'xls|xlsx|doc|docx|zip|rar'
            , done: function (res) {
                if (typeof (done) === 'function') {
                    if (res.code === 200){
                        done(res.data);
                    }
                }
            }
            , error: function () {
                if (typeof (error) === 'function') {
                    error()
                }
            }
        });
    };
</script>
</body>
</html>
